<template>
  <el-form
    ref="ruleFormRef"
    style="max-width: 600px"
    :model="ruleForm"
    :rules="rules"
    label-width="auto"
    class="demo-ruleForm"
    :size="formSize"
    status-icon
  >
    <el-form-item label="类型" prop="leiXing">
      <el-select v-model="ruleForm.leiXing" placeholder="--请选择--">
        <el-option label="--请选择--" value="--请选择--" />
        <el-option label="通知" value="通知" />
        <el-option label="公告" value="公告" />
      </el-select>
    </el-form-item>

    <el-form-item label="状态" prop="status">
      <el-select v-model="ruleForm.status" placeholder="--请选择--">
        <el-option label="--请选择--" value="--请选择--" />
        <el-option label="一般" value="一般" />
        <el-option label="重要" value="重要" />
        <el-option label="紧急" value="紧急" />
      </el-select>
    </el-form-item>

    <el-form-item label="标题" prop="tiTle">
      <el-input v-model="ruleForm.tiTle" />
    </el-form-item>

    <el-form-item label="链接" prop="lianJie">
      <el-input v-model="ruleForm.lianJie" />
    </el-form-item>

    <el-form-item label="描述" prop="miaoShu">
      <el-input v-model="ruleForm.miaoShu" type="textarea" />
     
    </el-form-item>

    <el-form-item label="发布时间" prop="createTime">
      <el-input v-model="ruleForm.createTime" type="date" />
    </el-form-item>

    <el-form-item label="发布人" prop="peoPle">
      <el-input v-model="ruleForm.peoPle" />
    </el-form-item>

    <el-form-item label="部门" prop="buMen">
      <el-input v-model="ruleForm.buMen" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)">
        修改
      </el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
import axios from 'axios';

import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
import { ElMessage, ElMessageBox } from 'element-plus';

interface RuleForm {
  
  id:number
  leiXing: string
  status:  string
  tiTle:  string
  lianJie: string
  miaoShu:  string
  createTime: Date
  peoPle: string
  buMen: string
}

const formSize = ref<ComponentSize>('default');
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive<RuleForm>({
  
  id:0,
  leiXing: '',
  status:   '',
  tiTle:   '',
  lianJie: '',
  miaoShu:   '',
  createTime: new Date(),
  peoPle: '',
  buMen: ''
});

const locationOptions = ['Home', 'Company', 'School'];


onMounted(()=>{
  
  axios({

    url:'https://localhost:7074/api/GuanLi/FanTian/FanTian',
    method:'get',
    params:{

      Id:route.query.id
    }
  })
  .then((res)=>{

 
    console.log(res.data);
    ruleForm.id=res.data.data.id
    ruleForm.leiXing=res.data.data.leiXing
    ruleForm.status=res.data.data.status
    ruleForm.tiTle=res.data.data.tiTle
    ruleForm.lianJie=res.data.data.lianJie
    ruleForm.miaoShu=res.data.data.miaoShu
    ruleForm.createTime=res.data.data.createTime.split("T")[0]
    ruleForm.peoPle=res.data.data.peoPle
    ruleForm.buMen=res.data.data.buMen
  })
})




const rules = reactive<FormRules<RuleForm>>({
  leiXing: [
    { required: true, message: '类型不能为空', trigger: 'blur' },
    
  ],
  status: [
    {
      required: true,
      message: '状态不能为空',
      trigger: 'change'
    }
  ],
  tiTle: [
    {
      required: true,
      message: '标题不能为空',
      trigger: 'change'
    }
  ],
  lianJie: [
    {
     
      required: true,
      message: '链接不能为空',
      trigger: 'change'
    }
  ],
  miaoShu: [
    {
    
      required: true,
      message: '描述不能为空',
      trigger: 'change'
    }
  ],
  createTime: [
    {
      required: true,
      message: '创建时间不能为空',
      trigger: 'change'
    }
  ],
  peoPle: [
    {
    
      required: true,
      message: '发布人不能为空',
      trigger: 'change'
    }
  ],
  buMen: [
    {
      required: true,
      message: '部门不能为空',
      trigger: 'change'
    }
  ]
});

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!');

      axios({

          url:'https://localhost:7074/api/GuanLi/Update/Update',
          method:'put',
          data:ruleForm
          }).then((res)=>{

          console.log(res)
          if(res.data.code==200){

            ElMessage.success("修改成功!");
            router.push("TypeList");
          }
          else{

            ElMessage.error("修改失败");
          }
          })
        

        
   
    } else {
      console.log('error submit!', fields);
    }
  });
};

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`
}));
</script>
